<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../引入vue2.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #app {
        width: 100vw;
        overflow: hidden;
      }
      /* #region 导航列 */
      .cates {
        height: 50px;
        display: flex;
        align-items: center;
        background-color: #fff;
        position: fixed;
      }
      /* 取消滚动条 */
      .cates::-webkit-scrollbar {
        display: none;
      }
      .cates {
        overflow-x: scroll;
      }
      .cates > div {
        margin: 0 15px;
        padding: 0 15px;
        /* 当父元素空间不够的时候，子元素展示不下了，默认会对子元素强制压缩空间，以保证子元素宽度不会超出父元素宽度。默认值是1。设置为0标识禁止压缩子元素空间。 */
        flex-shrink: 0;
      }
      .catesActive {
        font-size: 20px;
        font-weight: bolder;
      }
      .content {
        padding: 20px;
      }
      /* #endregion */
      /* 内部内容 */
      .content {
        padding-top: 50px;
      }

      /* #region 分类 all css */
      .cates_com {
        height: 100vh;
        overflow-y: scroll;
      }

      .cates_com::-webkit-scrollbar {
        display: none;
      }
      .cates_com .lqb_theme {
        display: flex;
        margin-top: 10px;
      }
      .cates_com .lqb_theme > h5 {
        margin-right: 10px;
        flex-shrink: 0;
        font-size: 16px;
      }
      .cates_com .lqb_themes {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
      .cates_com .lqb_themes > div {
        margin-right: 10px;
        color: rgb(94, 94, 94);
        font-size: 14px;
      }
      .cates_com .lqb_content {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .cates_com .lqb_content > div:first-child > div {
        margin-left: 10px;
        font-size: 14px;
        color: rgb(94, 94, 94);
      }
      .cates_com .lqb_item_active {
        color: skyblue !important;
      }
      /* #endregion */

      /* #region 精选 all css */
      .goods_com .banner {
        padding: 0 0 10px 0;
      }
      .goods_com .banner img {
        width: 343px;
        height: 137px;
        border-radius: 5px;
      }
      .goods_title {
        display: flex;
        justify-content: space-between;
      }
      .goods_title > div:nth-child(2) {
        color: gray;
      }
      /* #endregion */
      /* #region common */
      .lqb_item {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .lqb_item > div:first-child img {
        width: 150px;
        height: 112px;
        border-radius: 5px;
      }
      .lqb_item .author {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .lqb_item .author > div:first-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .lqb_item .author > div > img {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        padding-right: 5px;
      }
      .lqb_item .lqb_item_info {
        height: 115px;
        padding: 0 10px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .lqb_item .lqb_item_info > p {
        /* 多行文本溢出隐藏 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      /* #endregion */
    </style>
  </head>

  <body>
    <div id="app">
      <cates-item></cates-item>
      <div class="content">
        <component :is="comname"></component>
      </div>
    </div>
    <!-- 导航列 -->
    <template id="cates">
      <div class="cates">
        <div :class="{catesActive:catesActiveId===4}" @click="changeCates(4)">
          分类
        </div>
        <div :class="{catesActive:catesActiveId===5}" @click="changeCates(5)">
          精选
        </div>
        <div
          :class="{catesActive:catesActiveId===item.id}"
          v-for="item in cates"
          :key="item.id"
          @click="changeCates(item.id)"
        >
          {{item.name}}
        </div>
      </div>
    </template>
    <!-- 分类组件 -->
    <template id="catesCom">
      <div class="cates_com" @scroll="loadMore">
        <div><input type="text" placeholder="fyk" /></div>
        <!-- 主题 选项卡 -->
        <div class="lqb_theme">
          <h5>主题</h5>
          <div class="lqb_themes">
            <div>全部</div>
            <div v-for="theme in themes" :key="theme.id">{{theme.name}}</div>
          </div>
        </div>
        <!-- 排序 -->
        <div class="lqb_content">
          <div style="display: flex">
            <h4>排序</h4>
            <div :class="{lqb_item_active:typeId==2}" @click="changeCates(2)">
              综合
            </div>
            <div :class="{lqb_item_active:typeId==1}" @click="changeCates(1)">
              最新
            </div>
            <div :class="{lqb_item_active:typeId==3}" @click="changeCates(3)">
              最热
            </div>
          </div>
          <div style="color: skyblue">v更多筛选</div>
        </div>
        <!-- 数据列表 -->
        <lqb_item
          v-for="item in cates"
          :key="item.id"
          :list-info="item"
        ></lqb_item>
        <div
          class="lqb_loading"
          v-show="isloading"
          style="text-align: center; height: 30px; line-height: 30px"
        >
          加载中...
        </div>
      </div>
    </template>
    <!-- 精选组件 -->
    <template id="goodsCom">
      <div class="goods_com">
        <div class="banner">
          <img src="https://ss.lanqb.com/o_1f8mp9vnuchogchc1map1vgr7.png" />
        </div>
        <!-- 精选教程 -->
        <goods_title title="精选教程"></goods_title>
        <lqb_item
          v-for="item in pickItem"
          :key="item.id"
          :list-info="item"
        ></lqb_item>

        <!-- 最新上架 -->
        <goods_title title="最新上架"></goods_title>
        <lqb_item
          v-for="item in newItem"
          :key="item.id"
          :list-info="item"
        ></lqb_item>

        <!-- 限时免费 -->
        <goods_title title="限时免费"></goods_title>
        <lqb_item
          v-for="item in listItem"
          :key="item.id"
          :list-info="item"
        ></lqb_item>
      </div>
    </template>

    <!-- 精选 标题组件 -->
    <template id="goodsTitle">
      <div class="goods_title">
        <div>{{title}}</div>
        <div v-if="title!='限时免费'">查看更多></div>
      </div>
    </template>
    <!-- 其他组件 -->
    <template id="courseCom">
      <div class="course_com">其他组件</div>
    </template>
    <!-- lqb 列表组件 -->
    <template id="lqbItem">
      <div class="lqb_item">
        <div>
          <img :src="'https://ss.lanqb.com/' + listInfo.posters.mobile" />
        </div>
        <div class="lqb_item_info">
          <p>{{listInfo.title}}</p>
          <div class="author">
            <div>
              <img
                :src="'https://ss.lanqb.com/' + listInfo.profile.avatar"
                alt=""
              />
              {{listInfo.profile.nickname}}
            </div>
            <span>共 {{listInfo.preview_setting.lessons_count}} 节</span>
          </div>
          <div style="color: gray">{{listInfo.study_num}}人在学</div>
        </div>
      </div>
    </template>
  </body>
  <script>
    // 请求函数
    function request(url) {
      return new Promise((resolve, reject) => {
        fetch(url)
          .then((res) => res.json())
          .then((data) => {
            resolve(data);
          });
      });
    }
    /* 列表组件 */
    const lqb_item = {
      template: "#lqbItem",
      props: ["listInfo"],
    };
    /* 分类组件 */
    const cates_com = {
      template: "#catesCom",
      data() {
        return {
          themes: [],
          cates: [],
          page: 1,
          typeId: 2,
          isloading: true,
        };
      },
      components: {
        lqb_item,
      },
      methods: {
        loadMore(e) {
          if (
            e.target.scrollTop + e.target.clientHeight >=
            e.target.scrollHeight - 1
          ) {
            this.page++;
            this.isloading = true;
            /* 数据列表 */
            request(
              `https://m.lanqb.com/api/course/video?type=2&page=${this.page}`
            ).then((data) => {
              this.cates = [...this.cates, ...data.data];
              this.isloading = false;
            });
          }
        },
        changeCates(id) {
          /* 数据列表 */
          request(
            `https://m.lanqb.com/api/course/video?type=${id}&page=1`
          ).then((data) => {
            this.cates = data.data;
            this.typeId = id;
          });
        },
      },
      created() {
        /* 选项卡列表 */
        request("https://m.lanqb.com/api/course-group-list").then((data) => {
          this.themes = data.course_subjects;
        });
        /* 数据列表 */
        request("https://m.lanqb.com/api/course/video?type=2&page=1").then(
          (data) => {
            this.cates = data.data;
          }
        );
      },
    };
    /* 精选 标题组件 */
    const goods_title = {
      template: "#goodsTitle",
      props: ["title"],
    };
    /* 精选组件 */
    const goods_com = {
      template: "#goodsCom",
      data() {
        return {
          listItem: [], //限时免费
          pickItem: [], //精选教程
          newItem: [], //最新上架
        };
      },
      components: {
        goods_title,
        lqb_item,
      },
      created() {
        /* 精选 精选教程 列表信息 */
        const pickItem = request(
          "https://m.lanqb.com/api/course/video?is_recommend=Y&limit=8&not_ids="
        );
        pickItem.then((data) => {
          this.pickItem = data.data;
        });
        /* 精选 精选教程 列表信息 */
        const newItem = request(
          "https://m.lanqb.com/api/course/video?type=1&limit=8&not_ids=1273,1143,529,1413,1233,1281,1210,1426"
        );
        newItem.then((data) => {
          this.newItem = data.data;
        });
        /* 精选 限时免费 列表信息 */
        const listItem = request(
          "https://m.lanqb.com/api/course/video?is_free=Y&limit=8&not_ids=1273,1143,529,1413,1233,1281,1210,1426,1473,1471,1463,1462,1461,1460,1459,1458"
        );
        listItem.then((data) => {
          this.listItem = data.data;
        });
      },
    };
    /* 其他组件 */
    const course_com = {
      template: "#courseCom",
    };
    /* 导航列 */
    const catesItem = {
      template: "#cates",
      data() {
        return {
          cates: [],
          catesActiveId: 5,
        };
      },
      methods: {
        changeCates(id) {
          this.catesActiveId = id;
          let typeName = "";
          switch (id) {
            case 4:
              typeName = "cates_com";
              break;
            case 5:
              typeName = "goods_com";
              break;
            default:
              typeName = "course_com";
              break;
          }
          this.$parent.getCatesType(typeName);
        },
      },
      created() {
        /* 导航列 选项信息 */
        fetch("https://m.lanqb.com/api/course-group-list")
          .then((res) => res.json())
          .then((data) => {
            this.cates = data.course_fields;
          });
      },
    };
    /* 根组件 */
    let vm = new Vue({
      el: "#app",
      data: {
        comname: "goods_com",
      },
      methods: {
        getCatesType(typeName) {
          this.comname = typeName;
        },
      },
      components: {
        catesItem,
        cates_com,
        goods_com,
        course_com,
      },
    });
  </script>
</html>

